<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未来之窗昭和仙君cyberwin_fairyalliance_webquery-V151</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 0;
            margin: 0;
        }
        /* 顶部导航样式 */
        header {
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .nav-container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 16px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
			width: 95%;
			 max-width: 100%;
        }
        .nav-title {
            font-size: 22px;
            font-weight: bold;
            color: #165DFF;
        }
        .nav-title .icon {
            margin-right: 8px;
        }
        nav ul {
            display: flex;
            list-style: none;
        }
        nav li {
            margin-left: 24px;
			 margin-left: 20px;
        }
        nav a {
            text-decoration: none;
            color: #333;
            font-size: 16px;
            transition: color 0.3s;
        }
        nav a:hover {
            color: #165DFF;
        }
        nav a .icon {
            margin-right: 4px;
        }
        /* 主内容样式 */
        .main-container {
            width: 90%;
            max-width: 1200px;
            margin: 32px auto;
        }
        /* 章节样式 */
        section {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            padding: 24px;
            margin-bottom: 32px;
        }
        .section-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 12px;
            margin-bottom: 24px;
        }
        .section-title .icon {
            color: #165DFF;
            margin-right: 8px;
        }
        /* 子标题样式 */
        .sub-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin: 20px 0 12px;
        }
        /* 文本段落样式 */
        p {
            margin-bottom: 16px;
            font-size: 16px;
        }
        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 16px 0;
        }
        table th, table td {
            border: 1px solid #eee;
            padding: 12px 16px;
            text-align: left;
        }
        table th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #666;
        }
        table tr:nth-child(even) {
            background-color: #fafbfc;
        }
        /* 代码样式 */
        code {
            background-color: #f5f5f5;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: "Consolas", monospace;
            font-size: 14px;
            color: #d32f2f;
        }
        pre {
            background-color: #f5f5f5;
            border-radius: 8px;
            padding: 16px;
            margin: 16px 0;
            overflow-x: auto;
            border: 1px solid #eee;

			
        }
        pre code {
            background-color: transparent;
            padding: 0;
            color: #333;
			color: #d32f2f;
        }
        /* 列表样式 */
        ul {
            margin-left: 24px;
            margin-bottom: 16px;
        }
        ul li {
            margin-bottom: 8px;
        }
        /* 高亮提示框样式 */
        .tip-box {
            background-color: #f0f7ff;
            border-left: 4px solid #165DFF;
            padding: 12px 16px;
            border-radius: 0 4px 4px 0;
            margin: 16px 0;
        }
        .tip-box .tip-title {
            font-weight: bold;
            margin-bottom: 8px;
            color: #165DFF;
        }
        /* 图标样式 */
        .icon {
            display: inline-block;
            width: 1em;
            height: 1em;
            stroke-width: 0;
            stroke: currentColor;
            fill: currentColor;
            vertical-align: middle;
        }
        .icon-window-maximize {
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-16 160H64V96h384v96z'/%3E%3C/svg%3E") no-repeat center;
            background-size: contain;
        }
        .icon-info-circle {
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm20-312h-40v-40c0-11.05-8.95-20-20-20s-20 8.95-20 20v40h-40c-11.05 0-20 8.95-20 20s8.95 20 20 20h40v40c0 11.05 8.95 20 20 20s20-8.95 20-20v-40h40c11.05 0 20-8.95 20-20s-8.95-20-20-20z'/%3E%3C/svg%3E") no-repeat center;
            background-size: contain;
        }
        .icon-search {
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6 0-33.9zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E") no-repeat center;
            background-size: contain;
        }
        .icon-code {
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M168 160h128v192h-128V160zm-48 32h32v128h-32V192zm240 0h32v128h-32V192zM496 405.3l-96-96V256h-16v53.3l-96 96L217.3 448l128 128 128-128L496 405.3zm-256 96l-96-96 96-96 96 96-96 96z'/%3E%3C/svg%3E") no-repeat center;
            background-size: contain;
        }
        .icon-mouse-pointer {
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M414.3 233.4c15.4 4.2 26.8 18.9 26.8 35.2 0 19.9-12.7 37.2-30.2 44.4l-176 64c-15.6 5.7-32.8-4.5-32.8-20.8V280c0-8.6 4.6-16.6 12-21l176-80c16.3-7.5 35.2 4.1 35.2 21.5 0 1.9-.1 3.8-.3 5.6zM128 256c0 17.7 14.3 32 32 32h128v-64H160c-17.7 0-32 14.3-32 32z'/%3E%3C/svg%3E") no-repeat center;
            background-size: contain;
        }
        .icon-wpforms {
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6S11.4 153.8 42.5 203.2l19.7 20.3L84.5 256l-22.3 22.5-19.7 20.3c-31.1 49.4-12.1 130.6 37.2 140.4 28.6 5.2 58.6-6.1 79.4-26.9l19.7-20.3 19.7 20.3c20.8 20.8 50.9 32.1 79.4 26.9 49.4-9.8 68.3-91.1 37.2-140.4l-19.7-20.3L427.5 256l-22.3-22.5 19.7-20.3c31.1-49.4 12.1-130.6-37.2-140.4zM288 336c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm-96 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm-96 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z'/%3E%3C/svg%3E") no-repeat center;
            background-size: contain;
        }
        .icon-exchange {
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M456.7 98.7l-48 48C417.6 138.9 416 146.1 416 153.3V208h16c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-96c-8.8 0-16-7.2-16-16V176c0-8.6 4.6-16.6 12-21l176-80c16.3-7.5 35.2 4.1 35.2 21.5 0 1.9-.1 3.8-.3 5.6zM128 256c0 17.7 14.3 32 32 32h128v-64H160c-17.7 0-32 14.3-32 32zm368 128h-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h96c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16h-16v-54.7c0-7.3 1.6-14.4 4.7-20.6l48-48c28.6-37.1 20.4-89.3-16.7-117.9-37.1-28.6-89.3-20.4-117.9 16.7l-176 176c-12.5 12.5-12.5 32.8 0 45.3l176 176c28.6 37.1 80.8 45.3 117.9 16.7 37.1-28.6 45.3-80.8 16.7-117.9l-48-48z'/%3E%3C/svg%3E") no-repeat center;
            background-size: contain;
        }
        .icon-bookmark {
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M0 512V48C0 21.5 21.5 0 48 0h288c26.5 0 48 21.5 48 48v464L192 400 0 512z'/%3E%3C/svg%3E") no-repeat center;
            background-size: contain;
        }
        .icon-lightbulb-o {
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M208 416c0 17.67-14.33 32-32 32s-32-14.33-32-32 14.33-32 32-32 32 14.33 32 32zm95.42-180.15c-.23-25.48-16.54-48.94-40.74-58.29-26.54-10.44-54.78-.89-71.59 24.62l-8.58 12.66c-15.98 23.54-44.39 35.57-73.3 30.06-31.25-6.24-55.68-32.97-59.43-64.83-3.9-33.75 20.02-65.27 52.08-76.72 25.44-9.36 53.67-4.47 73.94 11.89l12.78 11.61c20.53 18.77 50.15 23.3 73.44 10.71 25.15-13.79 40.74-40.29 40.74-68.94C352 61.92 290.08 0 208 0S64 61.92 64 144c0 36.86 17.74 69.67 46.6 91.14 26.54 19.4 60.49 29.54 95.4 29.54 34.91 0 68.86-10.15 95.4-29.55 28.86-21.47 46.6-54.28 46.6-91.14 0-12.97-2.56-25.38-7.11-36.82l-12.79 11.61c-11.55 10.54-27.44 16.59-44.15 16.59-21.05 0-40.55-9.37-53.29-25.72l-8.58-12.66c-15.24-22.5-39.26-35.52-65.72-35.52-25.4 0-49.45 12.14-65.68 34.32-18.28 25.27-17.06 61.45 3.22 85.48 20.91 24.71 51.32 36.81 83.62 30.71 33.75-6.46 60.67-35.25 66.85-69.89 3.33-19.24 16.39-36.97 34.91-45.21V144c0 52.94 43.06 96 96 96 1.51 0 3.02-.03 4.52-.08-1.77 15.22-8.66 29.66-20.1 41.07z'/%3E%3C/svg%3E") no-repeat center;
            background-size: contain;
        }

		.icon-笔记 {
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM14 7h-4v5l2.5 1.5L14 12V7z'/%3E%3C/svg%3E") no-repeat center;
		background-size: contain;
		}
        /* 响应式适配 */
        @media (max-width: 768px) {
            .nav-container {
                flex-direction: column;
                align-items: flex-start;
            }
            nav ul {
                margin-top: 16px;
                flex-wrap: wrap;
            }
            nav li {
                margin-left: 0;
                margin-right: 16px;
                margin-bottom: 8px;
            }
            .section-title {
                font-size: 20px;
            }
            .sub-title {
                font-size: 16px;
            }
            table th, table td {
                padding: 8px 12px;
                font-size: 14px;
            }
        }

		h2 {
    color: #333;
    margin: 25px 0 15px;
    padding-left: 10px;
    border-left: 4px solid #165DFF;
}
.property-list {
    display: grid
;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin: 20px 0;
}
.property-item {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #eee;
}
code {
    font-family: "Consolas", monospace;
    color: #d32f2f;
}
.function-info {
    background-color: #f0f7ff;
    border-radius: 6px;
    padding: 20px;
    margin: 20px 0;
}

.event-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}
.event-item {
    background-color: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    border-left: 3px solid #165DFF;
}

.example-box {
    border: 1px dashed #165DFF;
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
}
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <header>
        <div class="nav-container">
            <h1 class="nav-title">
                <span class="icon icon-window-maximize"></span>未来之窗昭和仙君(V2025.151)-天和八年秋
            </h1>
            <nav>
                <ul>
                    <li><a href="#intro"><span class="icon icon-info-circle"></span>介绍</a></li>
                    <li><a href="#selectors"><span class="icon icon-search"></span>选择器</a></li>
                    <li><a href="#dom"><span class="icon icon-code"></span>DOM操作</a></li>
                    <li><a href="#events"><span class="icon icon-mouse-pointer"></span>事件</a></li>
                    <li><a href="#forms"><span class="icon icon-wpforms"></span>表单</a></li>
                    <li><a href="#ajax"><span class="icon icon-exchange"></span>AJAX</a></li>
					 <li><a href="#模板渲染"><span class="icon icon-笔记"></span>模板渲染</a></li>
					  <li><a href="#链式"><span class="icon icon-exchange"></span>链式</a></li>
					    <li><a href="#通用数据渲染功能"><span class="icon icon-search"></span>数据渲染</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="main-container">
        <!-- 介绍部分 -->
        <section id="intro">
            <h2 class="section-title">
                <span class="icon icon-bookmark"></span>库介绍
            </h2>
            <p>
                "未来之窗昭和仙君cyberwin_fairyalliance_webquery"（简称$cq库）是一款轻量级JavaScript查询库，支持DOM元素选择、样式操作、事件绑定、表单处理、AJAX请求等功能，同时提供了中文友好的方法命名，兼容多种浏览器，可满足前端日常开发中的常见交互需求。
            </p>
            <div class="tip-box">
                <div class="tip-title">核心特点</div>
                <ul>
                    <li>简洁易用的API设计，更轻量</li>
                    <li>支持中文命名的方法，符合中文开发者习惯</li>
                    <li>丰富的DOM操作和事件处理能力</li>
                    <li>强大的表单验证和数据序列化功能</li>
                    <li>完整的AJAX请求支持，包括GET、POST等方法</li>
					<li>模板引擎语法简洁，能快速结合数据生成动态 HTML，兼具防 XSS、支持逻辑处理和灵活配置，且衔接 DOM 高效渲染</li>
					<li>数据一键渲染：图片，表单，赋值，文本，复选</li>

                    <li>兼容主流浏览器，包括IE等旧版本浏览器</li>
                </ul>
            </div>
        </section>

        <!-- 核心选择器 -->
        <section id="selectors">
            <h2 class="section-title">
                <span class="icon icon-search"></span>核心选择器
            </h2>
            
            <h3 class="sub-title">1. 基础选择器</h3>
            <p>通过<code>$cq()</code>或<code>$zh()</code>函数创建查询实例，支持ID、类、标签选择器。</p>
            
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>选择器类型</th>
                            <th>语法</th>
                            <th>说明</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ID选择器</td>
                            <td><code>$cq("#元素ID")</code></td>
                            <td>通过元素ID选择单个元素</td>
                        </tr>
                        <tr>
                            <td>类选择器</td>
                            <td><code>$cq(".元素类名")</code></td>
                            <td>通过元素类名选择多个元素</td>
                        </tr>
                        <tr>
                            <td>标签选择器</td>
                            <td><code>$cq("标签名")</code></td>
                            <td>通过HTML标签名选择多个元素</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3 class="sub-title">2. 选择器方法</h3>
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>方法</th>
                            <th>功能</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>eq(n)</code></td>
                            <td>选择匹配元素集合中的第n个元素（n从0开始）</td>
                            <td><code>$cq(".通用输入").eq(0).val()</code></td>
                        </tr>
                        <tr>
                            <td><code>find(selector)</code></td>
                            <td>在当前匹配元素的子元素中查找符合选择器的元素</td>
                            <td><code>$cq("#form_common").find("input")</code></td>
                        </tr>
                        <tr>
                            <td><code>not(selector)</code></td>
                            <td>排除匹配元素中符合选择器的元素</td>
                            <td><code>$cq("input").not(":disabled")</code></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- DOM操作方法 -->
        <section id="dom">
            <h2 class="section-title">
                <span class="icon icon-code"></span>DOM操作方法
            </h2>
            
            <h3 class="sub-title">1. 内容操作</h3>
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>方法</th>
                            <th>功能</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>val([value])</code></td>
                            <td>无参数时获取元素值（适用于input、select等），有参数时设置元素值</td>
                            <td>
                                <p>获取值：<code>$cq("#wlzcid5").val()</code></p>
                                <p>设置值：<code>$cq("#wlzcid5").val("测试值")</code></p>
                            </td>
                        </tr>
                        <tr>
                            <td><code>text([value])</code></td>
                            <td>无参数时获取元素文本内容，有参数时设置元素文本内容</td>
                            <td>
                                <p>获取文本：<code>$cq(".title").text()</code></p>
                                <p>设置文本：<code>$cq(".title").text("新标题")</code></p>
                            </td>
                        </tr>
                        <tr>
                            <td><code>html([value])</code></td>
                            <td>无参数时获取元素HTML内容，有参数时设置元素HTML内容</td>
                            <td>
                                <p>获取HTML：<code>$cq("#content").html()</code></p>
                                <p>设置HTML：<code>$cq("#content").html("&lt;p&gt;新内容&lt;/p&gt;")</code></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3 class="sub-title">2. 样式操作</h3>
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>方法</th>
                            <th>功能</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>css(attr, [value])</code></td>
                            <td>无value时获取元素CSS属性值，有value时设置元素CSS属性</td>
                            <td>
                                <p>获取样式：<code>$cq("#box").css("width")</code></p>
                                <p>设置样式：<code>$cq("#box").css("color", "red")</code></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3 class="sub-title">3. 显示隐藏</h3>
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>方法</th>
                            <th>功能</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>show()</code></td>
                            <td>显示匹配的元素（设置display: block）</td>
                            <td><code>$cq("#modal").show()</code></td>
                        </tr>
                        <tr>
                            <td><code>hide()</code></td>
                            <td>隐藏匹配的元素（设置display: none）</td>
                            <td><code>$cq("#modal").hide()</code></td>
                        </tr>
                    </tbody>
                </table>
            

			<!---2025-8-30-->
 
  
		 <h3 class="sub-title">4.  DOM操作方法-2025-08-30</h3>
        
        
            <table>
                <thead>
                    <tr>
                        <th>方法</th>
                        <th>功能</th>
                        <th>示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>append(html)</code></td>
                        <td>向匹配元素内部的末尾添加HTML内容</td>
                        <td>
                            <p><code>$cq("#list").append('&lt;li&gt;新列表项&lt;/li&gt;');</code></p>
                            <p>批量添加：<br>
                            <code>$cq(".container").append('&lt;div class="item"&gt;项目1&lt;/div&gt;&lt;div class="item"&gt;项目2&lt;/div&gt;');</code></p>
                        </td>
                    </tr>
                    <tr>
                        <td><code>prepend(html)</code></td>
                        <td>向匹配元素内部的开头添加HTML内容</td>
                        <td>
                            <p><code>$cq("#article").prepend('&lt;h2&gt;文章标题&lt;/h2&gt;');</code></p>
                            <p>添加多个元素：<br>
                            <code>$cq("#nav").prepend('&lt;li&gt;首页&lt;/li&gt;&lt;li&gt;关于&lt;/li&gt;');</code></p>
                        </td>
                    </tr>
                    <tr>
                        <td><code>insertBefore(html)</code></td>
                        <td>在匹配元素的前面（同级位置）插入HTML内容</td>
                        <td>
                            <p><code>$cq("#btn").insertBefore('&lt;label for="btn"&gt;点击按钮：&lt;/label&gt;');</code></p>
                            <p>插入提示信息：<br>
                            <code>$cq(".form-group").insertBefore('&lt;div class="tip"&gt;请填写以下信息&lt;/div&gt;');</code></p>
                        </td>
                    </tr>
                    <tr>
                        <td><code>insertAfter(html)</code></td>
                        <td>在匹配元素的后面（同级位置）插入HTML内容</td>
                        <td>
                            <p><code>$cq("#username").insertAfter('&lt;span class="error"&gt;用户名格式错误&lt;/span&gt;');</code></p>
                            <p>插入辅助内容：<br>
                            <code>$cq(".price").insertAfter('&lt;span class="unit"&gt;元&lt;/span&gt;');</code></p>
                        </td>
                    </tr>
                </tbody>
            </table>
<!---2025-8-30-->


 <h3 class="sub-title">5. tagName属性</h3>
        
       <div class="function-info">
                <p><strong>作用：</strong> 获取匹配元素集合中第一个元素的标签名</p>
                <p><strong>语法：</strong> $cq(selector).tagName</p>
                
                <h4>返回值</h4>
                <p>字符串，返回第一个匹配元素的标签名（大写形式，与原生DOM保持一致），若没有匹配元素则返回空字符串。</p>
                
                <h4>示例</h4>
                <pre><code>// HTML: &lt;input type="text" id="username" /&gt;
var tag = $cq("#username").tagName;
console.log(tag); // 输出: "INPUT"</code></pre>
            </div>  
           
<h3 class="sub-title">6. tagNames属性</h3>
  <div class="function-info">
                <p><strong>作用：</strong> 获取所有匹配元素的标签名列表</p>
                <p><strong>语法：</strong> $cq(selector).tagNames</p>
                
                <h4>返回值</h4>
                <p>数组，包含所有匹配元素的标签名（大写形式），每个元素对应一个匹配元素的标签名。</p>
                
                <h4>示例</h4>
                <pre><code>// HTML:
// &lt;input type="text" class="form-control" /&gt;
// &lt;select class="form-control"&gt;&lt;/select&gt;
// &lt;div class="form-control"&gt;&lt;/div&gt;

var tags = $cq(".form-control").tagNames;
console.log(tags); // 输出: ["INPUT", "SELECT", "DIV"]</code></pre>
            </div>

</div>

        </section>

        <!-- 属性与数据操作 -->
        <section id="attributes">
            <h2 class="section-title">
                <span class="icon icon-code"></span>属性与数据操作
            </h2>
            
            <h3 class="sub-title">1. 元素属性操作</h3>
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>方法</th>
                            <th>功能</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>attr(name, [value])</code></td>
                            <td>无value时获取元素属性值，有value时设置元素属性；value为null时移除属性</td>
                            <td>
                                <p>获取属性：<code>$cq("img").attr("src")</code></p>
                                <p>设置属性：<code>$cq("a").attr("href", "https://gitee.com")</code></p>
                                <p>移除属性：<code>$cq("input").attr("disabled", null)</code></p>
                            </td>
                        </tr>
                        <tr>
                            <td><code>removeAttr(name)</code></td>
                            <td>移除元素指定属性</td>
                            <td><code>$cq("input").removeAttr("readonly")</code></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3 class="sub-title">2. 数据属性操作（data-*）</h3>
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>方法</th>
                            <th>功能</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>data(key, [value])</code></td>
                            <td>无参数时获取所有data-*属性集合；1个参数时获取指定key的data值；2个参数时设置data值（自动处理data-前缀）</td>
                            <td>
                                <p>获取所有data：<code>$cq("#wlzcid5").data()</code></p>
                                <p>获取指定data：<code>$cq("#wlzcid5").data("未来之窗")</code></p>
                                <p>设置data：<code>$cq("#wlzcid5").data("未来之窗", "数据值")</code></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>


			  <h3>3. 扩展属性访问器</h3>
            <p>为$cq库扩展了常用的元素属性访问器，用于快速获取元素的标准属性值。</p>
            
            <div class="property-list">
                <div class="property-item">
                    <h4>id</h4>
                    <p>获取匹配元素集合中第一个元素的id属性值</p>
                    <pre><code>// 语法
$cq(selector).id</code></pre>
                </div>
                
                <div class="property-item">
                    <h4>name</h4>
                    <p>获取匹配元素集合中第一个元素的name属性值</p>
                    <pre><code>// 语法
$cq(selector).name</code></pre>
                </div>
                
                <div class="property-item">
                    <h4>className</h4>
                    <p>获取匹配元素集合中第一个元素的class属性值</p>
                    <pre><code>// 语法
$cq(selector).className</code></pre>
                </div>
                
                <div class="property-item">
                    <h4>src</h4>
                    <p>获取匹配元素集合中第一个元素的src属性值（适用于img、script等）</p>
                    <pre><code>// 语法
$cq(selector).src</code></pre>
                </div>
                
                <div class="property-item">
                    <h4>href</h4>
                    <p>获取匹配元素集合中第一个元素的href属性值（适用于a等）</p>
                    <pre><code>// 语法
$cq(selector).href</code></pre>
                </div>
                
                <div class="property-item">
                    <h4>tagName</h4>
                    <p>获取匹配元素集合中第一个元素的标签名</p>
                    <pre><code>// 语法
$cq(selector).tagName</code></pre>
                </div>
                
                <div class="property-item">
                    <h4>tagNames</h4>
                    <p>获取所有匹配元素的标签名列表</p>
                    <pre><code>// 语法
$cq(selector).tagNames</code></pre>
                </div>
            </div>
            
            <h4>属性示例</h4>
            <div class="example-box">
                <h4>HTML结构</h4>
                <pre><code>&lt;img id="user-avatar" class="avatar" src="/images/avatar.jpg" /&gt;
&lt;a id="home-link" name="nav-link" href="/home"&gt;首页&lt;/a&gt;</code></pre>
                
                <h4>JavaScript代码</h4>
                <pre><code>// 获取图片元素属性
console.log($cq("#user-avatar").id);        // 输出: "user-avatar"
console.log($cq("#user-avatar").className); // 输出: "avatar"
console.log($cq("#user-avatar").src);       // 输出: "/images/avatar.jpg"
console.log($cq("#user-avatar").tagName);   // 输出: "IMG"

// 获取链接元素属性
console.log($cq("#home-link").name);        // 输出: "nav-link"
console.log($cq("#home-link").href);        // 输出: "/home"
console.log($cq("#home-link").tagName);     // 输出: "A"</code></pre>
            </div>
			<!----通用属性--->


        </section>


		 <section id="通用属性操作方法prop">
		  <h2> 通用属性操作方法：prop()</h2>
            <div class="function-info">
                <p><strong>方法名：</strong> prop</p>
                <p><strong>作用：</strong> 通用的属性/特性获取和设置方法，支持获取单个属性值或为多个元素设置属性值</p>
                
                <h4>方法语法</h4>
                <pre><code>// 获取属性值
$cq(selector).prop(name)

// 设置属性值
$cq(selector).prop(name, value)</code></pre>
                
                <h4>参数说明</h4>
                <table class="param-table">
                    <tr>
                        <th>参数名</th>
                        <th>类型</th>
                        <th>是否必需</th>
                        <th>说明</th>
                    </tr>
                    <tr>
                        <td>name</td>
                        <td>String</td>
                        <td>是</td>
                        <td>要获取或设置的属性名称</td>
                    </tr>
                    <tr>
                        <td>value</td>
                        <td>任意类型</td>
                        <td>否</td>
                        <td>要设置的属性值，省略时为获取属性操作</td>
                    </tr>
                </table>
                
                <h4>返回值</h4>
                <ul>
                    <li>获取属性时：返回第一个匹配元素的属性值，无匹配元素返回空字符串</li>
                    <li>设置属性时：返回当前$cq对象，支持链式调用</li>
                </ul>
            </div>
            
            <h4>使用示例</h4>
            <div class="example-box">
                <h4>HTML结构</h4>
                <pre><code>&lt;input type="checkbox" id="agree" name="terms" /&gt;
&lt;input type="text" class="form-control" /&gt;
&lt;input type="text" class="form-control" /&gt;</code></pre>
                
                <h4>JavaScript代码</h4>
                <pre><code>// 获取属性值
console.log($cq("#agree").prop("type"));    // 输出: "checkbox"
console.log($cq("#agree").prop("name"));    // 输出: "terms"
console.log($cq("#agree").prop("checked")); // 输出: false

// 设置属性值
// 为复选框设置checked属性
$cq("#agree").prop("checked", true);
// 为多个元素设置属性
$cq(".form-control")
  .prop("disabled", true)
  .prop("placeholder", "请输入内容"); // 支持链式调用

// 验证结果
console.log($cq("#agree").prop("checked"));      // 输出: true
console.log($cq(".form-control:first").prop("disabled")); // 输出: true</code></pre>
            </div>
            
            <h4>实现代码</h4>
            <pre><code>// 通用属性/特性获取设置方法
cyberwin_query.prototype.prop = function(name, value) {
    // 无匹配元素时返回空
    if (this.elements.length === 0) {
        return value === undefined ? '' : this;
    }
    
    // 仅获取属性值
    if (value === undefined) {
        return this.elements[0][name] !== undefined ? this.elements[0][name] : '';
    }
    
    // 设置属性值
    this.elements.forEach(el => {
        el[name] = value;
    });
    return this; // 支持链式调用
};</code></pre>
           </section>

        <!-- 事件绑定 -->
        <section id="events">
            <h2 class="section-title">
                <span class="icon icon-mouse-pointer"></span>事件绑定
            </h2>
            
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>方法</th>
                            <th>功能</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>click(fn)</code></td>
                            <td>为匹配元素绑定点击事件</td>
                            <td>
<pre><code>$cq("#btn-submit").click(function() {
    alert("点击了提交按钮");
})</code></pre>
                            </td>
                        </tr>
                        <tr>
                            <td><code>each(fn)</code></td>
                            <td>遍历匹配元素集合，为每个元素执行回调函数（回调参数：索引i、当前元素）</td>
                            <td>
<pre><code>$cq(".通用输入").each(function(i, elem) {
    console.log("第" + (i+1) + "个输入框值：" + $cq(elem).val());
})</code></pre>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

		<!---事件二代开始---->
  <section>
  <h2>事件处理方法：事件()</h2>
        <p>本文档介绍$cq库中用于事件绑定的核心方法<code>事件()</code>，该方法提供了灵活的事件处理机制，支持多种事件类型和绑定方式。</p>
        
        
            <h3>1. 方法概述</h3>
            <div class="function-info">
                <p><strong>方法名：</strong> 事件</p>
                <p><strong>作用：</strong> 为匹配的DOM元素绑定一个或多个事件处理函数，支持链式调用</p>
               
                
                <h4>方法语法</h4>
                <pre><code>// 单个事件绑定
$cq(selector).事件(eventName, handler)

// 多个事件批量绑定
$cq(selector).事件({
    eventName1: handler1,
    eventName2: handler2,
    ...
})</code></pre>
                
                <h4>参数说明</h4>
                <table class="param-table">
                    <tr>
                        <th>参数名</th>
                        <th>类型</th>
                        <th>是否必需</th>
                        <th>说明</th>
                    </tr>
                    <tr>
                        <td>eventName</td>
                        <td>String</td>
                        <td>是（单个事件时）</td>
                        <td>事件名称，如"click"、"focus"等</td>
                    </tr>
                    <tr>
                        <td>handler</td>
                        <td>Function</td>
                        <td>是（单个事件时）</td>
                        <td>事件处理函数，当事件触发时执行</td>
                    </tr>
                    <tr>
                        <td>events</td>
                        <td>Object</td>
                        <td>是（批量绑定时）</td>
                        <td>键值对形式的事件配置，键为事件名，值为对应的处理函数</td>
                    </tr>
                </table>
                
                <h4>返回值</h4>
                <p>返回当前$cq对象实例，支持链式调用（如：<code>$cq("input").事件("focus", fn).事件("blur", fn2)</code>）</p>
                
                <h4>实现代码</h4>
                <pre><code>cyberwin_query.prototype.事件 = function(events, handler) {
    // 处理对象形式的事件配置 { event1: handler1, event2: handler2 }
    if (typeof events === 'object' && typeof handler === 'undefined') {
        Object.keys(events).forEach(eventName => {
            this.事件(eventName, events[eventName]);
        });
        return this;
    }

    // 确保事件名和处理器有效
    if (typeof events !== 'string' || typeof handler !== 'function') {
        console.error('事件名必须为字符串且处理器必须为函数');
        return this;
    }

    // 为所有匹配元素绑定事件
    this.elements.forEach(element => {
        // 使用已有的myAddEvent函数绑定事件
        未来之窗_附加事件(element, events, function(e) {
            // 绑定this为当前元素，传递事件对象
            handler.call(element, e || window.event);
        });
    });

    return this; // 支持链式调用
};</code></pre>
            </div>
        </section>
        
        <section>
            <h3>2. 常用事件类型及示例</h3>
            <p>以下是Web开发中常用的事件类型及使用示例，适用于表单元素、输入框等交互组件：</p>
            
            <div class="event-list">
                <div class="event-item">
                    <strong>focus</strong>
                    <p>元素获得焦点时触发</p>
                </div>
                <div class="event-item">
                    <strong>blur</strong>
                    <p>元素失去焦点时触发</p>
                </div>
                <div class="event-item">
                    <strong>input</strong>
                    <p>元素值发生变化时触发</p>
                </div>
                <div class="event-item">
                    <strong>change</strong>
                    <p>元素值改变并失去焦点时触发</p>
                </div>
                <div class="event-item">
                    <strong>keydown</strong>
                    <p>按下键盘按键时触发</p>
                </div>
                <div class="event-item">
                    <strong>search</strong>
                    <p>搜索框触发搜索时触发</p>
                </div>
            </div>
            
            <div class="example-box">
                <h4>完整示例：表单输入框事件处理</h4>
                
                <h5>HTML结构</h5>
                <pre><code>&lt;form id="user-form"&gt;
    &lt;div&gt;
        &lt;label&gt;用户名：&lt;/label&gt;
        &lt;input type="text" id="username" name="username" placeholder="请输入用户名"&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;label&gt;搜索：&lt;/label&gt;
        &lt;input type="search" id="search-input" placeholder="搜索内容"&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;label&gt;爱好：&lt;/label&gt;
        &lt;select id="hobby"&gt;
            &lt;option value=""&gt;请选择&lt;/option&gt;
            &lt;option value="reading"&gt;阅读&lt;/option&gt;
            &lt;option value="sports"&gt;运动&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/form&gt;</code></pre>
                
                <h5>JavaScript代码</h5>
                <pre><code>// 用户名输入框事件处理
$cq("#username")
    // 获得焦点事件
    .事件("focus", function() {
        // 聚焦时添加高亮样式
        this.style.border = "2px solid #165DFF";
        this.style.backgroundColor = "#f0f7ff";
    })
    // 失去焦点事件
    .事件("blur", function() {
        // 失焦时恢复样式
        this.style.border = "1px solid #ccc";
        this.style.backgroundColor = "";
        
        // 验证输入内容
        if (this.value.length < 3) {
            alert("用户名长度不能少于3个字符");
        }
    })
    // 输入事件（实时监测）
    .事件("input", function(e) {
        console.log("正在输入：", this.value);
        // 限制输入长度为10
        if (this.value.length > 10) {
            this.value = this.value.substring(0, 10);
        }
    })
    // 键盘按下事件
    .事件("keydown", function(e) {
        // 禁止输入空格
        if (e.keyCode === 32) {
            e.preventDefault(); // 阻止默认行为
            alert("用户名不能包含空格");
        }
    });

// 搜索框事件处理
$cq("#search-input")
    // 搜索事件（回车或搜索按钮）
    .事件("search", function() {
        if (this.value.trim()) {
            console.log("搜索内容：", this.value);
            // 执行搜索逻辑
            // searchAction(this.value);
        } else {
            alert("请输入搜索内容");
        }
    });

// 下拉选择框事件处理
$cq("#hobby")
    // 选项改变事件
    .事件("change", function() {
        console.log("选择了：", this.value);
        if (this.value) {
            alert("您选择的爱好是：" + this.options[this.selectedIndex].text);
        }
    });

// 批量绑定事件示例
$cq("input, select")
    .事件({
        "focus": function() {
            console.log("元素获得焦点：", this.id);
        },
        "blur": function() {
            console.log("元素失去焦点：", this.id);
        }
    });</code></pre>
                
                <h5>示例说明</h5>
                <ul>
                    <li><strong>focus/blur</strong>：用于处理输入框获取和失去焦点时的样式变化和验证逻辑</li>
                    <li><strong>input</strong>：实时监测输入框内容变化，可用于实时验证或输入限制</li>
                    <li><strong>keydown</strong>：捕获键盘输入，可用于禁止特定字符输入或快捷键处理</li>
                    <li><strong>search</strong>：专门用于搜索框，在用户执行搜索操作时触发</li>
                    <li><strong>change</strong>：适用于下拉框、复选框等，在值改变并确认后触发</li>
                    <li>批量绑定方式可简化多事件绑定代码，提高开发效率</li>
                </ul>
            </div>
        </section>
        
        <section>
            <h3>3. 事件处理函数中的this和事件对象</h3>
            <div class="function-info">
                <h4>this指向</h4>
                <p>在事件处理函数中，<code>this</code>指向当前触发事件的DOM元素，方便直接操作元素：</p>
                <pre><code>$cq("input").事件("focus", function() {
    // this指向当前获得焦点的input元素
    this.style.outline = "none";
    this.style.boxShadow = "0 0 3px #165DFF";
});</code></pre>
                
                <h4>事件对象(e)</h4>
                <p>事件处理函数接收一个事件对象参数，包含事件相关信息（如触发元素、按键代码等）：</p>
                <pre><code>$cq("input").事件("keydown", function(e) {
    // 标准化事件对象（兼容IE）
    e = e || window.event;
    
    console.log("按键代码：", e.keyCode);
    console.log("是否按下Ctrl键：", e.ctrlKey);
    
    // 阻止事件默认行为（如禁止回车提交表单）
    if (e.keyCode === 13) {
        e.preventDefault();
    }
});</code></pre>
            </div>
        </section>
        
        <section>
            <h3>4. 实际应用场景</h3>
            <p><strong>场景1：表单验证</strong> - 结合focus、blur和input事件实现实时表单验证：</p>
            <pre><code>$cq("#email")
    .事件("blur", function() {
        var email = this.value;
        if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            alert("请输入有效的邮箱地址");
            this.focus(); // 聚焦回输入框
        }
    })
    .事件("input", function() {
        // 实时显示验证状态
        var isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.value);
        this.style.borderColor = isValid ? "green" : "red";
    });</code></pre>
            
            <p><strong>场景2：搜索框自动完成</strong> - 结合input和keydown事件实现搜索提示：</p>
            <pre><code>$cq("#search")
    .事件("input", function() {
        // 输入间隔大于300ms才发送请求，避免频繁请求
        clearTimeout(this.searchTimer);
        var value = this.value;
        this.searchTimer = setTimeout(function() {
            if (value.length >= 2) {
                // 发送搜索建议请求
                // getSearchSuggestions(value);
                console.log("获取搜索建议：", value);
            }
        }, 300);
    })
    .事件("keydown", function(e) {
        // 按下上下键选择建议项
        if (e.keyCode === 38 || e.keyCode === 40) {
            e.preventDefault();
            // navigateSuggestions(e.keyCode === 38 ? "up" : "down");
        }
    });</code></pre>
        </section>
    </div>
<!---事件二代结束---->

        <!-- 表单处理 -->
        <section id="forms">
            <h2 class="section-title">
                <span class="icon icon-wpforms"></span>表单处理
            </h2>
            
            <h3 class="sub-title">1. 表单校验</h3>
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>方法</th>
                            <th>功能</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>未东方仙盟_通用技术_检测表单(tiptype)</code></td>
                            <td>校验表单元素，仅校验含<code>validform="required:true"</code>属性的必填项；tiptype为"layer"时用自定义弹窗提示，否则用alert提示；返回布尔值（true为通过校验，false为未通过）</td>
                            <td>
<pre><code>const 通过检测 = $cq("#form_common").未东方仙盟_通用技术_检测表单("layer");
if (通过检测) {
    console.log("表单校验通过");
}</code></pre>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3 class="sub-title">2. 表单数据序列化</h3>
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>方法</th>
                            <th>功能</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>WLZC_serializeJson()</code></td>
                            <td>将表单元素数据序列化为JSON对象，支持普通name属性和数组形式name（如ymethod[1][paymethod_id]）</td>
                            <td>
<pre><code>var 表单数据 = $cq("#未来之窗form").WLZC_serializeJson();
console.log(表单数据); 
// 输出：{username: "张三", password: "123456"}</code></pre>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- AJAX请求 -->
        <section id="ajax">
            <h2 class="section-title">
                <span class="icon icon-exchange"></span>AJAX请求
            </h2>
            
            <h3 class="sub-title">1. 全局AJAX设置</h3>
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>方法</th>
                            <th>功能</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>$cq.ajaxSetup(options)</code></td>
                            <td>设置全局AJAX默认配置（如请求头、超时时间等），后续AJAX请求会继承这些配置</td>
                            <td>
<pre><code>$cq.ajaxSetup({
    headers: {
        'Authorization':'Bearer your-token-here',
        'Content-Type':'application/json'
    }
});</code></pre>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3 class="sub-title">2. 核心AJAX方法</h3>
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>方法</th>
                            <th>功能</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>$cq.ajax(options)</code></td>
                            <td>发起AJAX请求，支持GET、POST等方法，可配置请求地址、参数、成功/错误回调等</td>
                            <td>
<pre><code>$cq.ajax({
    type: "POST",
    url: "https://api.example.com/submit",
    data: { common_form: 表单数据 },
    dataType: "JSON",
    success: function(data) {
        if (data.status === 1) {
            alert("提交成功");
        } else {
            alert(data.message);
        }
    },
    error: function(xhr, error) {
        console.log("请求错误：", error);
    }
});</code></pre>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3 class="sub-title">3. 快捷请求方法</h3>
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>方法</th>
                            <th>功能</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>$cq.get(url, [data], [success])</code></td>
                            <td>发起GET请求</td>
                            <td>
<pre><code>$cq.get("https://api.example.com/getData", { id: 1 }, function(data) {
    console.log("获取到的数据：", data);
});</code></pre>
                            </td>
                        </tr>
                        <tr>
                            <td><code>$cq.post(url, [data], [success])</code></td>
                            <td>发起POST请求</td>
                            <td>
<pre><code>$cq.post("https://api.example.com/saveData", { name: "测试" }, function(data) {
    console.log("保存结果：", data);
});</code></pre>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

		<!---2025-08-30-->
		 <section id="链式">
            <h2 class="section-title">
                <span class="icon icon-exchange"></span>链式调用
            </h2>
            
            
			  <div class="overflow-x-auto mb-6">
            <table>
                <thead>
                    <tr>
                        <th>方式</th>
                        <th>说明</th>
                        <th>示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>DOM操作链式调用</td>
                        <td>所有DOM操作方法均返回实例本身，可连续调用多个方法</td>
                        <td>
                            <code>$cq("#box")<br>
                            &nbsp;&nbsp;.prepend('&lt;h3&gt;标题&lt;/h3&gt;')<br>
                            &nbsp;&nbsp;.append('&lt;p&gt;正文内容&lt;/p&gt;')<br>
                            &nbsp;&nbsp;.insertAfter('&lt;div class="footer"&gt;底部&lt;/div&gt;');</code>
                        </td>
                    </tr>
                    <tr>
                        <td>渲染+DOM操作结合</td>
                        <td>渲染结果可直接结合DOM操作方法使用</td>
                        <td>
                            <code>$cq("#tpl")<br>
                            &nbsp;&nbsp;.未来之窗_通用技术_模板渲染(data)<br>
                            &nbsp;&nbsp;.appendTo("#container");</code>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>
	<!---2025-08-30链式调用-->

		<!---2025-08-30模板渲染-->

	 <section id="模板渲染">
            <h2 class="section-title">
                <span class="icon icon-exchange"></span>模板渲染：配置，渲染，模板规则
            </h2>
            <!---2025-08-30模板渲染配置-->
            <h3 class="sub-title">1. 模板渲染配置</h3>

			 <div class="overflow-x-auto mb-6">
            <table>
                <thead>
                    <tr>
                        <th>方法</th>
                        <th>功能</th>
                        <th>示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>$cq.渲染配置(options)</code></td>
                        <td>修改模板渲染引擎的全局配置，主要用于自定义模板分隔符</td>
                        <td>
                            <p>默认分隔符为 <code>{cwpdapp{</code> 和 <code>}}</code></p>
                            <p>修改为双大括号：<br>
                            <code>$cq.渲染配置({ open: "{{", close: "}}" })</code></p>
                            <p>修改为其他符号：<br>
                            <code>$cq.渲染配置({ open: "[[", close: "]]" })</code></p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
 <!---2025-08-30模板语法-->
 
		 <h3 class="sub-title">2. 模板语法</h3>

        
        <div class="overflow-x-auto mb-6">
            <table>
                <thead>
                    <tr>
                        <th>语法</th>
                        <th>功能</th>
                        <th>示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>{cwpdapp{# ... }}</code></td>
                        <td>包裹JavaScript逻辑代码（循环、条件判断等）</td>
                        <td>
                            <p>循环：<br>
                            <code>{cwpdapp{# for(var i=0; i&lt;d.list.length; i++) { }}<br>
                            &nbsp;&nbsp;&lt;li&gt;{cwpdapp{=d.list[i]}}&lt;/li&gt;<br>
                            {cwpdapp{# } }}</code></p>
                            <p>条件：<br>
                            <code>{cwpdapp{# if(d.show) { }}<br>
                            &nbsp;&nbsp;&lt;div&gt;显示内容&lt;/div&gt;<br>
                            {cwpdapp{# } }}</code></p>
                        </td>
                    </tr>
                    <tr>
                        <td><code>{cwpdapp{= ... }}</code></td>
                        <td>输出变量内容，会自动进行HTML转义（防止XSS攻击）</td>
                        <td>
                            <p>输出简单变量：<br>
                            <code>&lt;div&gt;姓名：{cwpdapp{=d.name}}&lt;/div&gt;</code></p>
                            <p>输出对象属性：<br>
                            <code>&lt;div&gt;年龄：{cwpdapp{=d.user.age}}&lt;/div&gt;</code></p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

<!---2025-08-30模板渲染方法-->
		 
		 <h3 class="sub-title">3. 模板渲染方法</h3>
        
        <div class="overflow-x-auto mb-6">
            <table>
                <thead>
                    <tr>
                        <th>方法</th>
                        <th>功能</th>
                        <th>示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>$cq.CyberWin_ClientRender(tpl)</code></td>
                        <td>通过模板字符串创建渲染器实例，返回包含render方法的对象</td>
                        <td>
                            <p>创建渲染器：<br>
                            <code>var renderer = $cq.CyberWin_ClientRender('&lt;div&gt;{cwpdapp{=d.name}}&lt;/div&gt;');</code></p>
                            <p>执行渲染：<br>
                            <code>var html = renderer.render({ name: "测试名称" });</code></p>
                        </td>
                    </tr>
                    <tr>
                        <td><code>render(data, [callback])</code></td>
                        <td>渲染器实例方法，将数据与模板结合生成HTML；有回调时执行回调，无回调时返回HTML</td>
                        <td>
                            <p>回调方式：<br>
                            <code>renderer.render(data, function(html) {<br>
                            &nbsp;&nbsp;$cq("#container").html(html);<br>
                            });</code></p>
                            <p>直接返回：<br>
                            <code>var html = renderer.render(data);<br>
                            $cq("#container").html(html);</code></p>
                        </td>
                    </tr>
                    <tr>
                        <td><code>$cq(selector).CyberWin_ClientRender(data, [callback])</code></td>
                        <td>通过选择器获取DOM元素作为模板，直接结合数据渲染</td>
                        <td>
                            <p>HTML模板：<br>
                            <code>&lt;script id="tpl" type="text/template"&gt;<br>
                            &nbsp;&nbsp;&lt;h3&gt;{cwpdapp{=d.title}}&lt;/h3&gt;<br>
                            &lt;/script&gt;</code></p>
                            <p>渲染调用：<br>
                            <code>$cq("#tpl").CyberWin_ClientRender({ title: "标题内容" }, function(html) {<br>
                            &nbsp;&nbsp;$cq("#result").html(html);<br>
                            });</code></p>
                        </td>
                    </tr>
                    <tr>
                        <td><code>$cq.未来之窗_通用技术_模板渲染(tpl)</code><br><code>$cq(selector).未来之窗_通用技术_模板渲染(data, [callback])</code></td>
                        <td>中文命名的渲染方法，功能与CyberWin_ClientRender完全一致</td>
                        <td>
                            <p>字符串模板：<br>
                            <code>$cq.未来之窗_通用技术_模板渲染(tpl).render(data);</code></p>
                            <p>DOM模板：<br>
                            <code>$cq("#tpl").未来之窗_通用技术_模板渲染(data, callback);</code></p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
			

    </section>


	<!---通用数据渲染功能-->
      <section id="通用数据渲染功能">
<h2>通用数据渲染功能</h2>
        <p>本文档介绍$cq库中用于数据渲染到界面的功能，包括核心函数和扩展的标签名属性。</p>
        
        <section>
            <h3>1. 核心渲染函数</h3>
            <div class="function-info">
                <p><strong>函数名：</strong> $cq.未来之窗_人工智能_前端口_数据渲染到界面</p>
                <p><strong>作用：</strong> 将数据对象中的键值对批量渲染到页面元素中，根据元素类型自动选择合适的赋值方式</p>
                <p><strong>版本：</strong> 2022-8-29</p>
              
                
                <h4>函数语法</h4>
                <pre><code>$cq.未来之窗_人工智能_前端口_数据渲染到界面(obj, 前置参数)</code></pre>
                
                <h4>参数说明</h4>
                <table class="param-table">
                    <tr>
                        <th>参数名</th>
                        <th>类型</th>
                        <th>是否必需</th>
                        <th>说明</th>
                    </tr>
                    <tr>
                        <td>obj</td>
                        <td>Object</td>
                        <td>是</td>
                        <td>需要渲染到界面的数据对象，键值对形式</td>
                    </tr>
                    <tr>
                        <td>前置参数</td>
                        <td>String</td>
                        <td>否</td>
                        <td>元素类名的前缀，默认为"cl_handle_data_"，用于匹配页面元素的class属性</td>
                    </tr>
                </table>
                
                <h4>功能说明</h4>
                <ul>
                    <li>函数会遍历数据对象obj的所有属性</li>
                    <li>每个属性会与前置参数组合形成元素的class选择器（格式：前置参数+属性名）</li>
                    <li>根据匹配到的元素标签类型，使用不同的方式赋值：
                        <ul>
                            <li>input和select元素：使用val()方法设置值</li>
                            <li>td和cyberdiv元素：使用text()方法设置文本内容</li>
                            <li>其他元素：默认使用text()方法设置文本内容</li>
                        </ul>
                    </li>
                </ul>
            </div>
            
            <h3>2. 使用示例</h3>
            <div class="example-box">
                <h4>HTML结构</h4>
                <pre><code>&lt;!-- 页面元素 --&gt;
&lt;input type="text" class="cl_handle_data_username" /&gt;
&lt;select class="cl_handle_data_gender"&gt;
    &lt;option value="male"&gt;男&lt;/option&gt;
    &lt;option value="female"&gt;女&lt;/option&gt;
&lt;/select&gt;
&lt;td class="cl_handle_data_age"&gt;&lt;/td&gt;
&lt;div class="cl_handle_data_address"&gt;&lt;/div&gt;
&lt;cyberdiv class="cl_handle_data_status"&gt;&lt;/cyberdiv&gt;</code></pre>
                
                <h4>JavaScript代码</h4>
                <pre><code>// 准备数据对象
var userData = {
    username: "张三",
    gender: "male",
    age: 30,
    address: "北京市朝阳区",
    status: "正常"
};

// 调用数据渲染函数
$cq.未来之窗_人工智能_前端口_数据渲染到界面(userData);

// 使用自定义前置参数的示例
// HTML元素class应为"user_info_username"等
// $cq.未来之窗_人工智能_前端口_数据渲染到界面(userData, "user_info_");</code></pre>
                
                <h4>执行结果</h4>
                <ul>
                    <li>class为"cl_handle_data_username"的input元素值将被设置为"张三"</li>
                    <li>class为"cl_handle_data_gender"的select元素将选中value为"male"的选项</li>
                    <li>class为"cl_handle_data_age"的td元素文本将被设置为"30"</li>
                    <li>class为"cl_handle_data_address"的div元素文本将被设置为"北京市朝阳区"</li>
                    <li>class为"cl_handle_data_status"的cyberdiv元素文本将被设置为"正常"</li>
                </ul>
            </div>
	  </section>









        <!-- 其他工具方法 -->
        <section id="utils">
            <h2 class="section-title">
                <span class="icon icon-lightbulb-o"></span>其他工具方法
            </h2>
            
            <h3 class="sub-title">1. 弹窗提示</h3>
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>方法</th>
                            <th>功能</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>showAlert(message, [type], [duration], [titleText])</code></td>
                            <td>显示自定义弹窗提示；type可选值：info（默认）、success、warning、error；duration为自动关闭时间（毫秒，0为不自动关闭）；titleText为弹窗标题</td>
                            <td>
<pre><code>$cq("#form_common").showAlert(
    "必填项不能为空", 
    "error", 
    5000, 
    "校验提示"
);</code></pre>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3 class="sub-title">2. 原生插件调用（适用于特定环境）</h3>
            <div class="overflow-x-auto mb-6">
                <table>
                    <thead>
                        <tr>
                            <th>方法</th>
                            <th>功能</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>$cq.net_aj(options)</code></td>
                            <td>调用CyberWin_JsStandardPlug插件的cwpd_aj方法发起请求</td>
                            <td>
<pre><code>$cq.net_aj({
    url: "https://api.example.com/net",
    method: "POST",
    data: "param=123"
});</code></pre>
                            </td>
                        </tr>
                        <tr>
                            <td><code>$cq.app_aj(options)</code></td>
                            <td>调用CyberWin_JsStandardPlug插件的cyberwinapp_aj方法</td>
                            <td>
<pre><code>$cq.app_aj({
    url: "https://api.example.com/app",
    method: "GET",
    data: ""
});</code></pre>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 完整使用示例 -->
        <section id="examples">
            <h2 class="section-title">
                <span class="icon icon-code"></span>完整使用示例
            </h2>
            
            <pre><code>&lt;!-- HTML结构 --&gt;
&lt;form id="future-form"&gt;
  &lt;input type="text" name="username" class="common-input" 
         validform="required:true" validtips="用户名不能为空"&gt;
  &lt;input type="password" name="password" class="common-input" 
         validform="required:true" validtips="密码不能为空"&gt;
  &lt;button type="button" id="submit-btn"&gt;提交&lt;/button&gt;
&lt;/form&gt;

&lt;script src="cyberwin_fairyalliance_webquery.js"&gt;&lt;/script&gt;
&lt;script&gt;
// 页面加载完成后执行
$cq(function() {
  // 1. 绑定提交按钮点击事件
  $cq("#submit-btn").click(function() {
    // 2. 校验表单
    const isPass = $cq("#future-form").未东方仙盟_通用技术_检测表单("layer");
    if (!isPass) return;

    // 3. 序列化表单数据
    const formData = $cq("#future-form").WLZC_serializeJson();
    console.log("表单数据：", formData);

    // 4. 全局AJAX配置（设置请求头）
    $cq.ajaxSetup({
      headers: {
        'Authorization': 'Bearer your-token-here'
      }
    });

    // 5. 发起AJAX请求提交表单
    $cq.ajax({
      type: "POST",
      url: "https://api.example.com/login",
      data: { form: formData },
      dataType: "JSON",
      success: function(data) {
        if (data.status === 1) {
          $cq("#submit-btn").showAlert("登录成功！", "success", 3000, "提示");
        } else {
          $cq("#submit-btn").showAlert(data.message, "error", 3000, "提示");
        }
      },
      error: function(xhr, error) {
        console.log("登录请求错误：", error);
        $cq("#submit-btn").showAlert("网络错误，请重试！", "error", 3000, "提示");
      }
    });
  });

  // 6. 遍历输入框并打印值
  $cq(".common-input").each(function(i, elem) {
    console.log("第" + (i+1) + "个输入框默认值：", $cq(elem).val());
  });
});
&lt;/script&gt;</code></pre>
        </section>
    </main>

    <!-- 页脚 -->
    <footer style="background-color: #fff; padding: 20px 0; border-top: 1px solid #eee; margin-top: 40px;">
        <div style="width: 90%; max-width: 1200px; margin: 0 auto; text-align: center; color: #666;">
            <p>未来之窗昭和仙君cyberwin_fairyalliance_webquery - 说明书</p>
            <p style="margin-top: 8px; font-size: 14px;">© 2025 cyberwin 未来之窗</p>
        </div>
    </footer>
</body>
</html>
